<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<link rel="stylesheet" href="../CSS/qietu.css">
	<link rel="stylesheet" href="../CSS/jquery.mCustomScrollbar.css">
	<link rel="stylesheet" href="../CSS/style.css">
	<style>
		.haed{
			text-align: center;
		}
		.add{
			margin: 0 0 0px 90px;
		}
	</style>
</head>

<body>

<div class="main">
	<div class="main-l fl">
		<div class="nbox">
			<div class="ncard">
				<div class="pillar" id="pillar1">
					<div class="nbox-item">
						<div class="ntit">
							<h2>大洲</h2>
							<form th:action="@{/index/addhtml }" method="post" class="add">
								<button>添加</button>
							</form>
						</div>

						<div class="nlist">
							<div class="tablebox">
								<table class="table">
									<thead>
									<tr>
										<td width="145">中文名称</td>
										<td width="115">英文名称</td>
										<td width="105">国家数量</td>
									</tr>
									</thead>
								</table>
							</div>
							<div class="tablebox roll1" >
								<table class="table">
									<tbody>
									<tr th:each="user2:${list1}">
										<td width="145" th:text="${user2.continent}"><a href="#" class="tit">中华人民共和国</a></td>
										<td width="115" th:text="${user2.english}">18.0万亿</td>
										<td width="105" th:text="${user2.amount}">北京</td>
										<td>
<!--											<a th:href="'/index/update/'+${user.name}">修改</a>-->
<!--											<a th:href="'/index/delete/'+${user.name}" >删除</a>-->
										</td>
									</tr>
									</tbody>
									<tbody>
									<tr th:each="user2:${userList1}">
										<td width="145" th:text="${user2.continent}"><a href="#" class="tit">中华人民共和国</a></td>
										<td width="115" th:text="${user2.english}">18.0万亿</td>
										<td width="105" th:text="${user2.amount}">北京</td>
										<td>
<!--											<a th:href="'/index1/update/'+${user.name}">修改</a>-->
<!--											<a th:href="'/index1/delete/'+${user.name}" >删除</a>-->
										</td>
									</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="main-c fl">
		<div class="header">
			<h2 class="haed">世界地图</h2>
		</div>
		<div class="nmap">
			<div style="height: 670px; width: 100%;" id="map">
			</div>
			<div style="height: 670px; width: 100%; display: none;" id="map2">
			</div>
		</div>

	</div>
	<div class="main-r fr">
		<div class="nbox pb35">
			<div class="nbox-item">
				<div class="ntit">
					<h2>国家</h2>

				</div>

				<div class="nlist">
					<div class="tablebox">
						<table class="table">
							<thead>
							<tr>
								<td width="145">名称</td>
								<td width="115">2021年GDP</td>
								<td width="105">首都</td>
								<td>人口</td>
							</tr>
							</thead>
						</table>
					</div>
					<div class="tablebox roll1" id="roll1">
						<table class="table">
							<tbody>
							<tr th:each="user:${list}">
								<td width="145" th:text="${user.name}"><a href="#" class="tit">中华人民共和国</a></td>
								<td width="115" th:text="${user.GDP}">18.0万亿</td>
								<td width="105" th:text="${user.capital}">北京</td>
								<td th:text="${user.people}">14亿</td>
							</tr>
							</tbody>

							<tbody>
							<tr th:each="user:${userList}">
								<form th:action="@{/index/addhtml }" method="post" class="add">
									<button>添加</button>
								</form>
								<td width="145" th:text="${user.name}"><a href="#" class="tit">中华人民共和国</a></td>
								<td width="115" th:text="${user.GDP}">18.0万亿</td>
								<td width="105" th:text="${user.capital}">北京</td>
								<td th:text="${user.people}">14亿</td>
								<td>
									<a th:href="'/index/update/'+${user.name}">修改</a>
									<a th:href="'/index/delete/'+${user.name}" >删除</a>
								</td>
							</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>

			<script type="text/javascript" src="../JS/jquery-1.10.1.min.js"></script>
			<script type="text/javascript" src="../JS/jquery.mCustomScrollbar.concat.min.js"></script>
			<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/neimenggu.js" type="text/javascript" charset="utf-8"></script>
			<script>

			</script>
			<script src="http://api.map.baidu.com/api?v=2.0&callback=map_init" type="text/javascript" charset="utf-8"></script>
			<script src="https://api.map.baidu.com/getscript?v=2.0&ak=&services=&t=20210201021024" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">

				//百度地图

				var markerArr = [


				];

				function map_init() {
					var map = new BMap.Map("map"); // 创建Map实例
					var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市
					map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
					map.enableScrollWheelZoom(true); //启用滚轮放大缩小



					map.setMapStyle({style:'midnight'})


					//向地图中添加缩放控件
					var ctrlNav = new window.BMap.NavigationControl({
						anchor: BMAP_ANCHOR_TOP_LEFT,
						type: BMAP_NAVIGATION_CONTROL_LARGE
					});
					//map.addControl(ctrlNav);

					//向地图中添加缩略图控件
					var ctrlOve = new window.BMap.OverviewMapControl({
						anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
						isOpen: 1
					});
					//map.addControl(ctrlOve);

					//向地图中添加比例尺控件
					var ctrlSca = new window.BMap.ScaleControl({
						anchor: BMAP_ANCHOR_BOTTOM_LEFT
					});
					//map.addControl(ctrlSca);

					var point = new Array(); //存放标注点经纬信息的数组
					var marker = new Array(); //存放标注点对象的数组
					var info = new Array(); //存放提示信息窗口对象的数组
					for (var i = 0; i < markerArr.length; i++) {
						var p0 = markerArr[i].point.split(",")[0]; //
						var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
						point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点

						var myIcon = new BMap.Icon("imgs/icon03.png", new BMap.Size(24, 37), {
							//offset: new BMap.Size(10, 25), // 指定定位位置
							//imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
						});


						marker[i] = new window.BMap.Marker(point[i],{icon:myIcon}); //按照地图点坐标生成标记



						map.addOverlay(marker[i]);
						//marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
						var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(40, 0) });
						label.setStyle({

							color : "white", //字体颜色
							fontSize : "16px",//字体大小 　　

							backgroundColor :"0.05", //文本标注背景颜色　

							border :"0",

							fontWeight :"bold" //字体加粗

						});


						marker[i].setLabel(label);
						info[i] = new window.BMap.InfoWindow("<dl style='font-size:13px;line-height:2; color:#fff;'>" +

								"<dt>**区</dt><dd>公司总数：<span>" + markerArr[i].gszs + "</span></dd><dd>在线设备：<span>" + markerArr[i].zxsb + "</span></dd><dd>离线设备：<span>" + markerArr[i].lxsb + "</span></dd><dd>设备总数：<span>" + markerArr[i].sbzs + "</span></dd></dl>"); // 创建信息窗口对象
					}

				}
				map_init();

				//地图2
				function map_init2(){

					//取得json的样式，读取json文件
					$.getJSON("js/ningbo.json", "", function(data) {
						//生成地图
						createMap(data);
					})
//生成地图
					function createMap(data){
						echarts.registerMap('demo',data);
						var chart = echarts.init(document.getElementById('map2'));
						chart.setOption({
							//backgroundColor:'#0a2f4a',
//       dataRange: {
//          min: 0,//颜色区间的最小值
//          max: 30,//颜色区间的最大值，和data中的最大值一致
//          x: 'left',
//          y: 'bottom',
//          text:['高','低'], // 文本，默认为数值文本
//          calculable : true,
//          inRange: {
//              //颜色区间
//              color: ['#52b2fe','yellow', 'orangered']
//          }
//       },
							visualMap : {
								show:false,
								min : 0,
								max : 1000,
								left : 'left',
								top : 'bottom',
								text : [ '高', '低' ],
								seriesIndex : [ 1 ],
								inRange : {
									color : [ '#1843ce', '#52b2fe' ]
								},
								calculable : true
							},
							tooltip : {
								enterable:true,

								trigger: 'item',

								axisPointer : { // 坐标轴指示器，坐标轴触发有效

									type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'

								},

								formatter:function(params)//数据格式

								{


									//console.log(params.data.xxx);
									return params.data.name+'<br/>'+
											'公司总数：'+params.data.gszs+'<br/>'+
											'在线设备：'+params.data.zxsb+'<br/>'+
											'离线设备：'+params.data.lxsb+'<br/>'+
											'设备总数：'+params.data.sbzs+'';

								}

							},
							series: [{
								name:'数据',
								type: 'map',
								map: 'demo',
								itemStyle:{
									normal:{
										label:{show:true,
											color:"#fff"
										},
										borderColor : '#051b4b',
										areaColor :'#00d6fb'
									},
									emphasis:{
										label:{show:true,
											color:"#fff"},
										areaColor : '#00c6e8',
//						shadowOffsetX : 0,
//						shadowOffsetY : 0,
//						shadowBlur : 20,
//						borderWidth : 0,
										//shadowColor : '#72a5da'
									}
								},
								data:[
									{name: '慈溪市', value: 0, gszs:20, zxsb:20, lxsb:20, sbzs:20

//                  	itemStyle:{
//                  		normal:{
//			                 	label:{show:true,
//			                 		color:"#fff"
//			                 	},
//			                 	borderColor : '#1d68b1',
//			                 	areaColor :'red'
//			                 },
//                  	}
									},
									{name: '余姚市', value: 0, gszs:20, zxsb:40, lxsb:40, sbzs:60},
									{name: '镇海区', value: 0, gszs:20, zxsb:20, lxsb:20, sbzs:20}
								]
							}]
						});
					}


				}
				//map_init2();


				$('.btns a').click(function(){
					$(this).addClass('active').siblings().removeClass('active');

					//切换
					if($(this).index()==0){
						$('#map').show();
						$('#map2').hide();
						map_init();
					}
					else{
						$('#map').hide();
						$('#map2').show();
						map_init2();
					}
					return false;
				})
			</script>
</body>
</html>

